[id^='refer'],
.refer {
	position: relative;
	width: 100%;
	.refer-area {
		height: 28px;
		font-size: 13px;
		color: #333;
		width: 100% !important;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0 20px 0 0;
		vertical-align: top;
		&:disabled {
			color: #999;
		}
		.refer-input {
			border: none;
			height: 26px;
		}
		ul {
			display: flex;
			align-items: center;
			li {
				&:last-child {
					width: 50%;
					flex: 1 0 auto;
				}
				&.selected-item {
					flex: 0 0 auto;
					background-color: #ddd;
					border-radius: 2px;
					margin-left: 8px;
					padding: 2px 4px;
					position: relative;
					height: 22px;
					&:first-child {
						margin-left: 0;
					}
					padding-right: 18px;
					.refer-del-i {
						display: inline-block;
						height: 12px;
						width: 12px;
						line-height: 12px;
						text-align: center;
						border-radius: 100%;
						background-color: red;
						color: #fff;
						position: absolute;
						top: 50%;
						margin-top: -6px;
						right: 4px;
						font-style: normal;
						cursor: pointer;
						z-index: 9;
					}
				}
			}
		}
		&::-webkit-scrollbar {
			/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
			width: 0; //纵向滚动条的宽度
			height: 0; //横向滚动条的高度
		}
		&:hover {
			&::-webkit-scrollbar {
				/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
				width: 0; //纵向滚动条的宽度
				height: 4px; //横向滚动条的高度
			}
			+ .icon-refer {
				height: 22px;
			}
		}
		&::-webkit-scrollbar-button {
			/*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
			display: none;
		}
		&::-webkit-scrollbar-track {
			/*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
			display: none;
		}
		&::-webkit-scrollbar-track-piece {
			/*内层轨道，滚动条中间部分（位置4）*/
			display: none;
		}
		&::-webkit-scrollbar-thumb {
			/*滚动条里面可以拖动的那部分（位置5）*/
			border-radius: 4px;
			background: #c1c1c1;
			&:hover {
				cursor: pointer;
			}
		}
		&::-webkit-scrollbar-resizer {
			/*定义右下角拖动块的样式（位置7）*/
			display: none;
		}
	}
	.refer-input {
		height: 28px;
		font-size: 13px;
		color: #333;
		width: 100% !important;
		&:disabled {
			color: #999;
		}
	}
	.icon-refer {
		position: absolute;
		z-index: 9;
		top: 1px;
		right: 1px;
		width: 20px;
		height: 26px;
		background: url('./img/canzhao.png') center 5px ~'/' 16px 16px no-repeat #fff;
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
	}
	&[class^='u-row'],
	&[class^='u-col'] {
		margin: 0;
		padding: 0;
	}
	[class^='u-row'],
	[class^='u-col'] {
		margin: 0;
		padding: 0;
	}
}
.refer-container {
	position: static;
	margin: 0 !important;
	z-index: 99;
	.refer-cover {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		background: transparent;
		z-index: 99;
	}
	.ref-name {
		display: inline-block;
		font-family: PingFangHK-Regular;
		font-size: 13px;
		color: #666;
		height: 28px;
		line-height: 28px;
		text-align: right;
		vertical-align: middle;
		padding: 0;
	}
	.refer-cascading-list {
		border-radius: 2px;
		background: #eee;
		overflow: auto;
		top: 32px;
		left: 0;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
		z-index: 99;
		max-width: 100%;
		min-width: 80px;
		height: 200px;
		background-color: #fff;
		position: fixed;
		.scroll-div {
			float: left;
			margin-left: 4px;
			position: relative;
			height: 100%;
			padding-top: 28px;
			min-width: 80px;
			width: 100%;
			> div {
				width: 100%;
				height: 100%;
				overflow: auto;
				background-color: #fff;
			}
			&:first-child {
				margin-left: 0;
			}
		}
		.refer-cascading-item {
			background: #fff;
			overflow-y: auto;
			overflow-x: hidden;
			&:first-child {
				border-left: none;
			}

			> li {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				cursor: pointer;
				padding: 5px 18px 5px 8px;
				font-family: PingFangHK-Semibold;
				font-size: 13px;
				color: #666;
				line-height: 18px;
				width: 100%;
				position: relative;
				&:hover,
				&.active,
				&.selected {
					background: #eee;
					color: #00b39e;
					> i {
						visibility: visible;
					}
				}
				> i {
					visibility: hidden;
				}
				> span {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: inline-block;
					width: calc(~'100% - 5px');
				}
				&.active,
				&.selected {
					font-weight: bold;
				}
			}

			> .refer-cascading-type {
				cursor: default;
				&:hover {
					background: #fff;
					color: #666;
				}
			}
		}
		.list-title {
			height: 28px;
			line-height: 28px;
			font-size: 12px;
			background-color: #fff;
			padding-left: 10px;
			color: #aaa;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin: 0;
		}
		.refer-loading {
			height: 28px;
			line-height: 28px;
			font-size: 13px;
			background-color: #fff;
			padding-left: 10px;
			color: #000;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	::-webkit-scrollbar {
		/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
		width: 4px; //纵向滚动条的宽度
		height: 4px; //横向滚动条的高度
	}
	::-webkit-scrollbar-button {
		/*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
		display: none;
	}
	::-webkit-scrollbar-track {
		/*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
		display: none;
	}
	::-webkit-scrollbar-track-piece {
		/*内层轨道，滚动条中间部分（位置4）*/
		display: none;
	}
	::-webkit-scrollbar-thumb {
		/*滚动条里面可以拖动的那部分（位置5）*/
		border-radius: 4px;
		background: #c1c1c1;
		&:hover {
			cursor: pointer;
		}
	}
	::-webkit-scrollbar-resizer {
		/*定义右下角拖动块的样式（位置7）*/
		display: none;
	}
	.u-tree li {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		span.u-tree-switcher {
			&.u-tree-bottom_close,
			&.u-tree-center_close,
			&.u-tree-noline_close,
			&.u-tree-roots_close,
			&.u-tree-bottom_open,
			&.u-tree-center_open,
			&.u-tree-noline_open,
			&.u-tree-roots_open {
				height: 14px;
				width: 14px;
				border: none;
				border-radius: 2px;
				transform: scale(1);
				font-size: 14px;
			}
			&.u-tree-bottom_open,
			&.u-tree-center_open,
			&.u-tree-noline_open,
			&.u-tree-roots_open {
				background: url("./img/-@3x.png") center center /contain no-repeat;
			}
			&.u-tree-bottom_close,
			&.u-tree-center_close,
			&.u-tree-noline_close,
			&.u-tree-roots_close {
				background: url("./img/+@3x.png") center center /contain no-repeat;
			}
			&.u-tree-bottom_close:after,
			&.u-tree-center_close:after,
			&.u-tree-noline_close:after,
			&.u-tree-roots_close:after,
			&.u-tree-bottom_open:after,
			&.u-tree-center_open:after,
			&.u-tree-noline_open:after,
			&.u-tree-roots_open:after {
				content: '';
			}
		}
		a {
			font-size: 13px;
			transition: none;
			&:hover {
				background-color: #f4f4f4;
				color: #e14c46;
			}
			&.u-tree-node-selected {
				background-color: #f4f4f4;
				color: #e14c46;
			}
		}
	}
	.u-tree-checkbox-inner {
		transition: none;
	}
	.u-tree-checkbox-checked .u-tree-checkbox-inner,
	.u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
		background: url("./img/ischeck.png") center center / contain no-repeat;
		border: none;
		background-color: transparent;
		transition: none;
	}
	.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
		transition: none;
	}
	.u-tree li span.u-tree-iconEle,
	.u-tree li span.u-tree-switcher {
		height: 14px;
		width: 14px;
	}
}
